<template>
    <div class="myaddress">
        <div class="head">
            <div class="head_left"><van-icon name="arrow-left" @click="back" /></div>
            <div class="head_mid">
                <div class="head-box">我的地址</div>
            </div>
            <div class="head_right"></div>
        </div>
        <div class="address">
            <van-address-list v-model="chosenAddressId" :list="list.data" default-tag-text="默认" @add="onAdd" @edit="onEdit" @select="select" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { getUserAddress } from "../../request/index";
import { useStore } from "vuex";
let router = useRouter();
let userid = ref("");
let store = useStore();

let back = () => {
    router.go(-1);
};

const chosenAddressId = ref("1");
let list = reactive({
    data: [],
});

userid.value = localStorage.getItem("user_id");
if (userid.value == undefined) {
    console.log("登录已过期");
} else {
    getUserAddress({ user_id: userid.value }).then((res) => {
        res.data.forEach((item) => {
            let obj = {
                id: `${item.address_id}`,
                name: item.user_name,
                tel: item.user_phone,
                address: item.user_address,
            };
            list.data.push(obj);
        });
    });
}

// let addressIndex = ref("");
// addressIndex = computed(() => {
//     return store.state.myindex.addressindex;
// });
// console.log(addressIndex.value.length); //0
const onAdd = () => {
    router.push({
        path: "/addaddress",
    });
};
const select = (item, index) => {
    store.commit("myindex/changeAddressIndex", index);
};
const onEdit = (item, index) => showToast("编辑地址:" + index);
</script>

<style lang="scss" scoped>
.myaddress {
    .head {
        color: #666666;
        box-shadow: 0 0 5px 1px #e5e5e5;
        height: 3.125rem;
        display: flex;
        .head_left {
            font-size: 1.25rem;
            width: 6.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .head_mid {
            font-size: 1.0625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        .head_right {
            width: 6.25rem;
        }
    }
}
</style>
